import defaltImg from '@/assets/images/200.png'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  install (app) {
    app.directive('imgLazy', {
      mounted (imgDom, binding) {
        // el:img dom对象
        // binding.value  图片url地址 拿到绑定的值 比如 v-imgLazy="123", 拿到123
        // 使用vueuse/core提供的监听api 对图片dom进行监听 正式进入视口才加载
        // img.src = url
        console.log(imgDom, binding)
        const { stop } = useIntersectionObserver(
          // 监听目标元素
          imgDom,
          ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
              // 当图片url无效加载失败的时候使用默认图片替代
              imgDom.onerror = function () {
                imgDom.src = defaltImg
              }
              imgDom.src = binding.value
              stop()
            }
          },
          // 刚进入视口区域就立刻执行回调 0 - 1
          { threshold: 0 }
        )
      }
    })
  }
}
